import { getUserHandler } from '@/api/user';
import { Button, Popconfirm, Space, Spin, Table, Image, DatePicker } from 'antd';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import { useState, FC, useEffect } from 'react';
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
interface AccountListProps { }
interface DataType {
    avatar?: string
    birthday?: string
    createTime?: string
    email?: string
    nickname?: string
    qq?: string
    sex?: number
    tel?: string
    username?: string
    wx?: string
}
const { RangePicker } = DatePicker;
const AccountList: FC<AccountListProps> = () => {
    const height = document.body.clientHeight
    const [data, setData] = useState<DataType[]>([])
    const [current, setCurrent] = useState(1)
    const [flag, setFlag] = useState(true)
    const [selectDate, SetSelectDate] = useState<string[]>([])
    const [originData, setOriginData] = useState<DataType[]>([])
    useEffect(() => {
        (async function fn() {
            setFlag(true)
            let res = await getUserHandler();
            setData(res.data.data);
            setOriginData(res.data.data)
            setFlag(false)
        })()
    }, [])
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            render: (text: any, record: DataType, index: number) => {
                return (
                    <span>{(current - 1) * 10 + (index + 1)}</span>
                )
            }
        },
        {
            title: '姓名',
            dataIndex: 'nickname',
        },
        {
            title: '头像',
            dataIndex: 'avatar',
            render: (text: string) => {
                return (
                    <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" style={{ width: 50, height: 50 }}></Image>
                )
            }
        },
        {
            title: '注册时间',
            dataIndex: 'createTime',
            render: (text: string) => {
                return (
                    <span>{dayjs(parseInt(text)).format('YYYY年MM月DD日')}</span>
                )
            }
        },
        {
            title: '操作',
            render: (text: DataType, record: DataType, index: number) => {
                return (
                    <Space>
                        <Button type='dashed' onClick={() => { }}>编辑</Button>
                        <Button type='dashed' onClick={() => { }}>解封</Button>
                        <Popconfirm
                            title="删除数据"
                            description="你确定要删除这条数据吗?"
                            onConfirm={() => { }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button danger>封号</Button>
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]
    const onChange = (page: any) => {
        setCurrent(page)
    }
    return (
        <Space direction='vertical' style={{ width: '100%' }}>
            <Space>
                <RangePicker
                    onChange={(dates, dateStrings) => {
                        let arr: any = []
                        dateStrings.forEach(item => {
                            arr.push(new Date(item).getTime())
                        })
                        SetSelectDate(arr)
                        if (dates === null) {
                            setData(originData)
                        }
                    }}
                    locale={locale}
                />  
                <Button type="primary" onClick={() => {
                    let newarr = data.filter(item => {
                        return (item.createTime as string) > selectDate[0]! && (item.createTime as string) < selectDate[1]
                    })
                    setData(newarr)
                }}>搜索</Button>
            </Space>
            <Spin tip="加载中,请稍等！！" size="large" style={{ width: '100%', height: '100%', display: 'flex' }} spinning={flag}>
                <Table
                    columns={columns}
                    dataSource={data}
                    scroll={{ y: height - 330 }}
                    rowKey='userid'
                    pagination={
                        {
                            total: data.length,
                            showTotal: (total) => `共 ${total} 条数据`,
                            showQuickJumper: true,
                            showSizeChanger: true,
                            onChange,
                            pageSizeOptions: [5, 10, 20, 50]
                        }
                    }
                />;
            </Spin>
        </Space>
    )
}
export default AccountList;
